<template>
  <div>
    <div class="flex-start">
      <filling-station-status-select class="m-r-10" @change="statusChange"/>
      <app-dict-select placeholder="请选择加注站类型" dict-code="site_type" class="m-r-10" @change="typeChange"/>
      <el-input class="m-r-10" size="small" placeholder="请输入加注站名称" v-model="search.queryStr"
                style="width: 300px;"></el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="query">查询</el-button>
    </div>
    <div class="m-t-20">
      <el-table :data="data" v-loading="loading" style="width: 100%" border
                :header-cell-style="{background:'#eee',color:'#000'}">
        <el-table-column label="" width="40">
          <template v-slot="scope">
            <el-radio :label="scope.row.id" v-model="stationSelect" class="m-l-5">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60"/>
        <el-table-column prop="siteName" label="加注站名称" width="180"/>
        <el-table-column prop="siteType" label="加注站类型" width="180"/>
        <el-table-column prop="siteAddress" label="加注站地址和位置"/>
        <el-table-column prop="contactName" label="联系人" width="200"/>
        <el-table-column label="营业状态" width="100">
          <template v-slot="scope">{{ scope.row.siteStatus | status }}</template>
        </el-table-column>
      </el-table>
      <app-pagination ref="paginationRef" :total="total" :page-size="page.size" class="m-t-20" @change="pageChange"/>
    </div>
    <div class="dividing-line m-t-20"></div>
    <div class="flex-center m-t-20">
      <div></div>
      <div class="flex-center">
        <el-button type="primary" size="small" @click="doConfirm">确定</el-button>
        <el-button type="primary" size="small" plain @click="doCancel">取消</el-button>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import FillingStationStatusSelect from "@/components/business/filling-station-status-select";
import AppPagination from "@/components/business/app-pagination";
import AppDictSelect from "@/components/business/app-dict-select";
import {getPage} from "@/api/business/filling-station";
import {equals, getRecords, getTotal, isNull, msgError} from "@/util/common-util";

export default {
  name: "filling-station-select-content",
  components: {AppDictSelect, AppPagination, FillingStationStatusSelect},
  data() {
    return {
      loading: false,
      data: [],
      search: {
        siteType: '',
        siteStatus: '',
        queryStr: ''
      },
      stationSelect: null,
      page: {
        size: 20,
        current: 1
      },
      total: 0,
    }
  },
  filters: {
    status(v) {
      if (equals(v, 1)) return "正常"
      if (equals(v, 0)) return "关闭"
      return "未知"
    }
  },
  created() {
    this.query()
  },
  methods: {
    doCancel() {
      this.back()
    },
    back() {
      this.$emit('hide')
    },
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    typeChange(v) {
      this.search.siteType = v
      this.query()
    },
    statusChange(_status) {
      this.search.siteStatus = _status
      this.query()
    },
    query() {
      this.loading = true
      getPage(this.page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
    doConfirm() {
      if (isNull(this.stationSelect)) return msgError("请选择一个加注站")
      let flag = true
      for (const item of this.data) {
        if (equals(item.id, this.stationSelect)) {
          this.$emit("change", item)
          this.back()
          flag = false
        }
      }
      if (flag) msgError("请选择一个加注站")
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
